<script setup lang="ts">
import type {TypeTourUsers} from "~/utils/client";
import type {RouteParamValue} from "vue-router";

const route = useRoute()

const users = ref<TypeTourUsers>([]);

const getUsers= async (id: string | RouteParamValue[]) => {
  if (id) {
    const {data, error, response} = await client.getTourUsers(id)
    if (data) {
      users.value = data
      loaderState.value = false
    }
    if (error) {
      if (response.status === 404) {
        navigateTo('/tours')
      }
      console.log(error)
    }
  }
  else {
    navigateTo('/tours')
  }
}
const loaderState = ref(true)


getUsers(route.params.id)
</script>

<template>
  <Loader :show="loaderState"/>
  <div class="container flex-grow">
    <Table>
      <TableCaption>Список пользователей забронировавших тур</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead class="text-center">Имя</TableHead>
          <TableHead class="text-center">Фамилия</TableHead>
          <TableHead class="text-center">Email</TableHead>
          <TableHead class="text-center">Оплачен</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="user in users">
          <TableCell class="text-center">{{ user.first_name }}</TableCell>
          <TableCell class="text-center">{{ user.last_name }}</TableCell>
          <TableCell class="text-center">{{ user.email }}</TableCell>
          <TableCell class="text-center">
            <Icon name="line-md:circle-to-confirm-circle-transition" size="2rem" v-show="user.isPaid"/>
            <Icon name="line-md:close-circle" size="2rem" v-show="!user.isPaid"/>
          </TableCell>

        </TableRow>
      </TableBody>
    </Table>
  </div>

</template>

<style scoped>

</style>